<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="../templates/plantilla.xhtml">
	
	<ui:define name="head">::SCSN - Diseños Neumáticos</ui:define>
	<ui:define name="content">
	
		<h1 class="title ui-widget-header ui-corner-all">Diseños de Neumáticos</h1>
		<br/>
		
		<div class="entry" style="line-height:200%">
			<h:form id="frm">
				
				<p:dataTable id="tbDisenos" value="#{disenoNeumaticoBean.disenoModel}" scrollable="true" var="disenoNeumatico" rows="3"
					paginator="true" paginatorPosition="bottom" selection="#{disenoNeumaticoBean.disenoSeleccionado}" selectionMode="single"
					emptyMessage="No se encontraron resultados" onRowSelectUpdate="ventanaInfo" 
					onRowSelectComplete="ventanaVerInformacion.show()" onRowUnselectUpdate="ventanaInfo">
					
					<p:column filterBy="#{disenoNeumatico.nombre}" filterMatchMode="contains" headerText="Nombre">
						#{disenoNeumatico.nombre}
					</p:column>
					<p:column headerText="Descripción">
						#{disenoNeumatico.descripcion}
					</p:column>
					<p:column filterBy="#{disenoNeumatico.idMarca}" filterMatchMode="contains" headerText="Marca">
						#{disenoNeumatico.idMarca}
					</p:column>
					<p:column headerText="Imagen">
						#{disenoNeumatico.imagen}
					</p:column>
				</p:dataTable>
				
				<p:dialog id="dialog" header="Diseño: #{disenoNeumaticoBean.disenoSeleccionado.nombre}" widgetVar="ventanaVerInformacion" resizable="false"  
                		showEffect="fade" hideEffect="explode">
  					<h:panelGrid id="ventanaInfo" columns="1" cellpadding="4">
			            <h:outputLabel value="Nombre: #{disenoNeumaticoBean.disenoSeleccionado.nombre}"/>
	            		<h:outputLabel value="Descripción: #{disenoNeumaticoBean.disenoSeleccionado.descripcion}"/>
	            		<h:outputLabel value="Marca: #{disenoNeumaticoBean.disenoSeleccionado.idMarca}"/>
	            		<f:facet name="header">  
			                <p:graphicImage value="/imagenes/#{disenoNeumaticoBean.disenoSeleccionado.imagen}"/> <!-- Aqui se debe configurar la ruta de la imagen 
			                																					(es recomendable tener una ruta donde se guarden las
			                																					 descargas de la BD) -->
			            </f:facet>
			        </h:panelGrid>
			        <h:panelGrid> <p:commandButton value="Ok" onclick="ventanaVerInformacion.hide();"/> </h:panelGrid>  
		    	</p:dialog>  
			</h:form>
			
			<h:form>
	            <p:commandButton value="Nuevo" onclick="ventanaRegistro.show();"/>
	            <p:commandButton value="Modificar" onclick="ventanaModificar.show();"/>
	            <p:commandButton value="Eliminar" onclick="confirmacion.show();"/>
	            
	            <p:confirmDialog id="ventanaEliminar" message="Está seguro de eliminar este diseño?"  
			                header="Confirme la operación" severity="alert" widgetVar="confirmacion"
			                showEffect="pulsate" hideEffect="blind" modal="true" closable="false">  
			        <h:panelGrid columns="2"> 
				        <p:commandButton id="confirmar" value="Aceptar" oncomplete="confirmacion.hide();" />  
				        <p:commandButton id="rechazar" value="cancelar" onclick="confirmacion.hide();" type="button" />  
			        </h:panelGrid> 
			                  
			    </p:confirmDialog>
			    
	            <p:dialog widgetVar="ventanaModificar" header="Modificar Diseño"  closable="false">
	            	<h:panelGrid columns="3">
	            		<h:outputLabel value="Nombre: *" for="nombreMod"/>
	            		<h:inputText value="#{disenoNeumatico.nombre}" id="nombreMod" label="Nombre:" required="true"/>
	            		<p:message for="nombreMod"/>
	            		
	            		<h:outputLabel value="Descripción: " for="descripcionMod"/>
	            		<h:inputTextarea value="#{disenoNeumatico.descripcion}" id="descripcionMod" label="Descripción:"/>
	            		<p:message for="descripcionMod"/>
	            		
	            		<h:outputLabel value="Marca: *" for="marcaMod"/>
	            		<h:selectOneMenu id="marcaMod" label="Marca: *" required="true">
	            			<f:selectItem itemLabel="" itemValue=""/>
	            			<f:selectItem itemLabel="#{disenoNeumatico.idMarca}" itemValue=""/>
	            			<f:selectItem itemLabel="#{disenoNeumatico.idMarca}" itemValue=""/>
	            		</h:selectOneMenu>
			        	<p:commandButton value="Nueva Marca" onclick="ventanaNuevaMarca.show();"/>
			        	
	            		<p:message for="marcaMod"/>
  
					    
	            		
	            		<p:commandButton value="Modificar" onclick="ventanaModificar.hide();" type="reset"/>
	            		<p:commandButton value="Cancelar" onclick="ventanaModificar.hide();" type="reset"/>
	            		<p:commandButton value="Limpiar" type="reset"/>
	            	</h:panelGrid>
	            </p:dialog>
	            
	            <p:dialog widgetVar="ventanaRegistro" header="Registrar Nuevo Diseño"  closable="false">
	            	<h:panelGrid columns="3">
	            		<h:outputLabel value="Nombre: *" for="nombre"/>
	            		<h:inputText value="#{disenoNeumatico.nombre}" id="nombre" label="Nombre:" required="true"/>
	            		<p:message for="nombre"/>
	            		
	            		<h:outputLabel value="Descripción: " for="descripcion"/>
	            		<h:inputTextarea value="#{disenoNeumatico.descripcion}" id="descripcion" label="Descripción:"/>
	            		<p:message for="descripcion"/>
	            		
	            		<h:outputLabel value="Marca: *" for="marca"/>
	            		<h:selectOneMenu id="marca" label="Marca: *" required="true">
	            			<f:selectItem itemLabel="" itemValue=""/>
	            			<f:selectItem itemLabel="#{disenoNeumatico.idMarca}" itemValue=""/>
	            			<f:selectItem itemLabel="#{disenoNeumatico.idMarca}" itemValue=""/>
	            		</h:selectOneMenu>
			        	<p:commandButton value="Nueva Marca" onclick="ventanaNuevaMarca.show();"/>
			        	
	            		<p:message for="marca"/>
  
					    
	            		
	            		<p:commandButton value="Registrar" type="reset"/>
	            		<p:commandButton value="Cancelar" onclick="ventanaRegistro.hide();" type="reset"/>
	            		<p:commandButton value="Limpiar" type="reset"/>
	            	</h:panelGrid>
	            </p:dialog>
			</h:form>
			
			<h:form>
				<p:dialog widgetVar="ventanaNuevaMarca" header="Registrar Nueva Marca"
	            			showEffect="explode" hideEffect="explode" closable="false" modal="true">
	            	<h:panelGrid columns="3">
		            		<h:outputLabel value="Nombre: *" for="nombre"/>
		            		<h:inputText id="nombre" value="#{marcaNeumatico.nombre}" label="Nombre:" required="true"/>
		            		<p:message for="nombre"/>
		            		
		            		<h:outputLabel value="Descripción:" for="descripcion"/>
		            		<h:inputText id="descripcion" value="#{marcaNeumatico.descripcion}" label="Descripcion:"/>
		            		<p:message for="descripcion"/>
	            	</h:panelGrid>
		            		
            		<h:panelGrid columns="3">
	            		<p:commandButton value="Registrar" actionListener="#{controladorMensajes.empleadoGuardado}" type="reset"  update="growl"/>
           				<p:commandButton value="Cancelar" onclick="ventanaNuevaMarca.hide();" actionListener="#{controladorMensajes.empleadoGuardado}" type="reset"  update="growl"/>
            			<p:commandButton value="Limpiar" type="reset"/>
            		</h:panelGrid>
	            </p:dialog>
			</h:form>
			
			<h:form enctype="multipart/form-data">
				<p:fileUpload fileUploadListener="#{disenoNeumaticoBean.imagenSubida}"
			            update="messages"
			            label="Buscar"
			            sizeLimit="100000"   
			            allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>  
			  
			    <p:growl id="messages" showDetail="true"/> 
			</h:form>
		</div>
		
	</ui:define>
</ui:composition>